<script lang='ts' setup>
import router from "@/router";
import { emailService } from "@/services/email.service";
import { userService } from "@/services/user.service";
import { regExpEmail } from "@/utils/common.methods";
import { ref, defineProps } from "vue";

const loading = ref(false);
// step == 1
const email = ref("");
const emailTips = ref("");
// step == 2
const password = ref("");
const verifyCode = ref("");

const step = ref(1);

let secret = "";
function onVerifyEmail(): void {
  if (regExpEmail(email.value)) {
    emailTips.value = "";
  } else {
    emailTips.value = "请正确输入邮箱";
  }
}
function sendEmail(): void {
  emailService.sendVerifyCode(email.value).then((res) => {
    secret = res.secret;
    step.value = 2;
  });
}

function onRegister(): void {
  loading.value = true;
  userService.register(password.value, verifyCode.value, secret).then(() => {
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
}

function toLogin(): void {
  router.replace("login");
}
function onForgotPassword(): void {
  router.replace("forgotPassword");
}
</script>
<template>
  <div class="login flex-c">
    <img class="logo" src="@/assets/logo.png" alt="">
    <div class="sign-in" v-if="step == 1">
      <t-space direction="vertical" size="large" style="width: 100%">
        <t-space direction="vertical" :size="10" style="width: 100%">
          <span>请输入邮箱</span>
          <t-input v-model:value="email" :status="emailTips ? 'warning' : ''" :tips="emailTips" @change="onVerifyEmail" />
        </t-space>
        <t-space direction="vertical" :size="10" style="width: 100%">
          <t-button block :loading="loading" :disabled="!email || !!emailTips" @click="sendEmail">发送验证码</t-button>
        </t-space>
      </t-space>
    </div>
    <div class="sign-in" v-else-if="step == 2">
      <t-space direction="vertical" size="large" style="width: 100%">
        <t-space direction="vertical" :size="10" style="width: 100%">
          <span>请输入令牌验证码</span>
          <t-input v-model:value="verifyCode" />
        </t-space>
        <t-space direction="vertical" :size="10" style="width: 100%">
          <span>请设置您的密码</span>
          <t-input v-model:value="password" type="password" />
        </t-space>
        <t-space direction="vertical" :size="10" style="width: 100%">
          <t-button block :loading="loading" :disabled="!verifyCode || !password" @click="onRegister">注册</t-button>
        </t-space>
      </t-space>
    </div>
    <div class="bottom-tips flex">
      <div class="sign-up-btn">
        已有账户，<span class="link" @click="toLogin">去登陆</span>
      </div>
      <div class="forgot-password">
        <span class="link" @click="onForgotPassword">忘记密码</span>
      </div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.login {
  width: 350px;
  padding-top: 30px;

  .logo {
    width: 270px;
  }

  .sign-in {
    width: 100%;
    margin-top: 50px;
    padding: 30px;
    border: 1px solid #d8dee4;
    border-radius: 6px;
    background-color: #f6f8fa;
  }

  .bottom-tips {
    width: 100%;
    justify-content: space-between;

    .sign-up-btn,
    .forgot-password {
      margin-top: 30px;

      .link {
        color: var(--td-brand-color-active);
        cursor: pointer;
      }
    }
  }
}
</style>